<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千库建筑设计</title>
    <link rel="stylesheet" href="2.css">
</head>

<body>
    <!-- 头部区域 -->
    <header class="w ">
        <!-- 左边千库logo -->
        <div class="logo">
            <img src="image/logo.png" alt="">
        </div>
        <!-- 右边导航栏 -->
        <nav>
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">下载APP</a></li>
            </ul>
        </nav>
    </header>
    <!-- 头部区域 -->

    <!-- banner部分 看看能不能搞个轮播图 -->
    <div class="banner">
        <!-- 左右小箭头 -->
        <div class="leftarrow"><a href="#"></a></div>
        <div class="rightarrow"><a href="#"></a></div>
        <!-- 中央主体文字 -->
        <div class="font1 font">千库建筑设计</div>
        <!-- 文字下的小横线和拼音 -->
        <div class="font2 font">QIANKU</div>
        <!-- 云集业界高级设计师 -->
        <div class="font3 font">云集业界高级设计师</div>
        <!-- 下面的轮播图 -->
        <div class="promo">
            <ul>
                <li class="ellipse"><a href="#"></a></li>
                <li><a href="#" style="margin-right: 40px;"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- 此处欠缺三个透明盒子！！！ -->
        <!-- 横着的盒子先做 -->
        <div class="box1"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
    </div>
    <!-- banner部分结束 -->

    <!-- 设计方案 -->
    <div class="design">
        <!-- 顶部设计方案的横条栏目 -->
        <!-- 我将用一个column运用到接下来几页也有的横条~ -->
        <div class="column" style="margin-top: 120px;">
            <h3>设计方案</h3>
            <p>design scheme</p>
        </div>
        <!-- 接下来是下方的图片区 -->
        <div class="ds-pic">
            <div class="left">
                <!-- 左边三张图 -->
                <ul>
                    <li><img src="image/ds1.png" alt=""></li>
                    <li><img src="image/ds2.png" alt=""></li>
                    <li><img src="image/ds3.png" alt=""></li>
                </ul>
            </div>
            <div class="right">
                <img src="image/ds4.png" alt="">
            </div>
        </div>
    </div>
    <!-- 设计方案、 -->

    <!-- 加入我们の广告 -->
    <div class="ad">
        <div class="info">
            <div class="info1">优秀设计师在中国</div>
            <div class="info2">— 专业为本&nbsp; 客户为先 —</div>
            <a href="#">加入我们&gt;&gt;</a>
        </div>
    </div>
    <!-- 加入我们の广告 -->

    <!-- 《经典案例》 -->
    <div class="classic">
        <!-- 横条栏目 直接套格式了 -->
        <div class="column" style="margin-top: 142px;">
            <h3>经典案例</h3>
            <p>Classi case</p>
        </div>
        <!-- 接下来是五个照片盒子 -->
        <div class="box">
            <!-- 照片在上面就先放img 然后加<div class="info"></div> -->
            <div>
                <img src="image/box1.png" alt="">
                <div class="info">
                    <p class="num">01</p>
                    <span></span>
                    <p>建筑设计</p><br>
                </div>
            </div>
            <div>
                <div class="info">
                    <p class="num">02</p>
                    <span></span>
                    <p>建筑设计</p><br>
                </div>
                <img src="image/box2.png" alt="">
            </div>
            <div>
                <img src="image/box3.png" alt="">
                <div class="info">
                    <p class="num">03</p>
                    <span></span>
                    <p>建筑设计</p><br>
                </div>
            </div>
            <div>
                <div class="info">
                    <p class="num">04</p>
                    <span></span>
                    <p>建筑设计</p><br>
                </div>
                <img src="image/box4.png" alt="">
            </div>
            <div>
                <img src="image/box5.png" alt="">
                <div class="info">
                    <p class="num">05</p>
                    <span></span>
                    <p>建筑设计</p><br>
                </div>
            </div>
        </div>
    </div>
    <!-- 《经典案例》 -->

    <!-- 签约流程 -->
    <div class="signing">
        <!-- 依然是直接搬.column -->
        <div class="column" style="padding-top: 75px;">
            <h3>签约流程</h3>
            <p>Signing process</p>
        </div>
        <div class="info">
            会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理
        </div>
        <!-- 下方的流程图 -->
        <div class="process">
            <ul>
                <li>识别与获取</li>
                <li>
                    <div></div>
                </li>
                <li>保有与维系</li>
                <li>
                    <div></div>
                </li>
                <li>最大化价值提示</li>
            </ul>
        </div>
    </div>
    <!-- 签约流程 -->

    <!-- 关于我们 -->
    <div class="about">
        <!-- 还是这个栏 经典永流传 -->
        <div class="column" style="margin-top: 146px;">
            <h3>关于我们</h3>
            <p>About us</p>
        </div>
        <div class="info1">
            会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理
        </div>
        <!-- 要不这个用定位做吧 -->
        <img src="image/about.png" alt="">
        <!-- 右侧文本框 -->
        <div class="info2">
            <h3>千库电子商务有限公司</h3>
            <p>
                这6句话，每天说一遍，孩子会一天比一天优秀　　　　很多父母以为给了孩子好的物质条件，孩子就能成功。但物质只能决定生活水平，父母的高度才能决定孩子的未来。　　优秀的父母都有个共性，他们会使用最好的教育工具——说话。这才是教育的最高境界，看完深受震撼！给差生一点时间，让他变成你喜欢的样子我想送自卑的孩子一杯酒。
            </p>
            <!-- 灰色方块和more -->
            <div class="more">
                <a href="#">MORE&gt;&gt;</a>
            </div>
        </div>
    </div>
    <!-- 关于我们 -->

    <!-- !!!!!!!!!!!!!!111 -->
    <!-- 尼玛 终于快做完了 -->
    <!-- 最后的联系我们 -->
    <footer>
        <div class="info1">
            <h3>联系我们</h3>
            <p>About us</p>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="#">产品中心</a></li>
            </ul>
        </div>
        <!-- 终于是最后的四行字了T T -->
        <div class="info2">
            <p>千库网Copyright © 2014-2019 沪ICP备10011451号-26</p>
            <p>ICP证书：沪B2-20180057</p>
            <p>沪公网安备 31011502008675号</p>
            <p>工业和信息化部举报邮箱：588ku@hanmaker.com网上有害信息举报专区</p>
        </div>
    </footer>
    <!-- 最后的联系我们 -->
    <!-- 终于做完了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 -->
</body>

</html>